/* ==========================================================================
   MARKDOWN FIELDTYPE
   ========================================================================== */

.markdown-fieldtype-wrapper {
    @apply border dark:border-dark-900 rounded overflow-hidden relative;

    .markdown-toolbar {
        @apply bg-white dark:bg-dark-700 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex flex-wrap items-center justify-between;
        padding: 4px 8px;
    }

    .markdown-buttons {
        @apply flex items-center;
    }

    .markdown-buttons button {
        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8;

        &:hover {
            @apply bg-gray-200 dark:bg-dark-750;
        }

        &.active {
            @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-175;
        }
    }

    .markdown-buttons button:disabled {
        @apply opacity-50;
        &:hover {
            @apply text-gray-800 dark:text-dark-200;
        }
    }

    .markdown-modes {
        @apply flex items-center;

        button {
            @apply text-gray-700 dark:text-dark-150 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;

            &:hover {
                @apply text-blue;
            }

            &.active {
                @apply bg-blue-100 dark:bg-dark-800 text-blue-800 dark:text-dark-150 rounded;
            }
        }
    }

    .CodeMirror {
        @apply bg-gray-100 dark:bg-dark-650 shadow-inner dark:shadow-inner-dark h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs dark:text-dark-150;
        border-radius: 0 0 3px 3px;

        &:focus-within {
            @apply ring-2 ring-inset ring-blue-200 dark:ring-dark-blue-150;
        }

        .cm-comment {
            @apply font-mono text-sm
        }
    }

    .CodeMirror-code { min-height: 100px; }

    .helpers {
        @apply border-t dark:border-dark-900 text-xs text-gray-800 dark:text-dark-150 flex items-center;

        button:hover {
            @apply text-blue;
        }
    }

    .markdown-cheatsheet-helper {
        @apply p-2 inline-block;
    }

    .markdown-asset-helper {
        @apply py-2 px-4 inline-block;
    }
}


/* Dark Mode
  ========================================================================== */

.markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode,
.dark .markdown-fieldtype-wrapper.markdown-fullscreen {
    @apply bg-gray-800 border-none;

    .markdown-toolbar {
        @apply text-white border-b border-gray-950 shadow-lg;
        background: linear-gradient(180deg, theme('colors.gray.900'), hsl(210, 20%, 13%));
    }

    .editor {
        @apply bg-gray-800 text-gray-200;
        .cm-header {
            @apply text-white;
        }
    }

    .helpers {
        @apply bg-gray-900 text-white border-t border-gray-950;
    }

    .markdown-buttons button {
        @apply text-gray-400;
    }

    .markdown-buttons button:hover {
        @apply bg-gray-950 text-white;
    }

    .markdown-modes button {
        @apply text-gray-700;
        &.active {
            @apply text-white bg-black;
        }
    }

    .CodeMirror {
        @apply text-white antialiased;
    }

    [class*="cm-"] {
        color: white !important;
    }

    .CodeMirror-cursor {
        border-left: 2px solid white;
    }

    .markdown-preview {
        @apply text-white;
    }
}


/* Read Only
  ========================================================================== */

.markdown-fieldtype.read-only-field .CodeMirror {
    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200;
}


/* Inside a Grid fieldtype
  ========================================================================== */

.grid-fieldtype .grid-table .markdown-fieldtype {
    .markdown-fieldtype-wrapper {
        @apply border rounded;
    }

    .markdown-preview {
        @apply border-none p-2 rtl:text-right ltr:text-left;
        p { line-height: 1.2; }
    }
}


/* Writing Mode Typography
  ========================================================================== */

.markdown-fieldtype .cm-header {
    @apply text-gray-800 dark:text-dark-150;

    &.cm-header-1 {
        @apply text-lg;
    }

    &.cm-header-2 {
        @apply text-base;
    }

    &.cm-header-3 {
        @apply text-sm;
    }
}

.markdown-fieldtype .cm-quote {
    @apply text-gray-800 dark:text-dark-150 italic text-sm;
}


/* Preview Mode Typography
  ========================================================================== */

.markdown-preview {
    @apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;

    min-height: 167px;

    ol {
        @apply list-decimal;
    }

    ul {
        @apply list-disc;
    }

    pre {
        @apply rounded px-4 py-2 dark:bg-dark-700 dark:text-red-500;
        color: #c7254e;
        background-color: #f9f2f4;
        direction: ltr;

        code { @apply p-0 }
    }
}

.markdown-fieldtype-wrapper.markdown-fullscreen {
    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-14 border-0;
    /* padding-top: 52px;  offset the nav */
    will-change: transform;

    .markdown-toolbar {
        @apply border-0;
    }

    .mode-wrap {
        height: calc(100vh - 88px); /*  sans toolbars */
        overflow-y: scroll;
        cursor: text;
        &.mode-preview {
            height: calc(100vh - 52px); /*  no footer toolbar */
        }
    }

    .editor {
        @apply bg-white shadow max-w-xl mx-auto rounded relative my-6 px-2 md:px-8 md:pt-8;

        .CodeMirror-scroll {
            @apply m-0;
        }
    }

    .CodeMirror {
        @apply outline-none bg-transparent shadow-none;
        &:focus, &:focus-within {
            @apply ring-0 !important;
        }
    }

    .markdown-preview {
        @apply max-w-xl bg-transparent mx-auto relative p-8 text-lg;
    }

    .helpers {
        @apply absolute bottom-0 inset-x-0 bg-white;
    }
}
